<template>
  <div>
        <Row  style="margin-top:20px;padding-bottom:20px;font-size:14px;">
            <Col span="2">
                  <Button style="background-color:#143f87;color:white" size="large">文章查询</Button>
            </Col>
            <Col span="19" style="padding-left:8px">
                <Input v-model="query_data.search_article"  size="large">
                </Input>
            </Col>
            <Col span="2">
                <Button style="background-color:#143f87;color:white" size="large" @click="handleSearch()">搜索</Button>
            </Col>
        </Row>
        <Row>
            <Col span="5">
                <div>
                    <Select v-model="query_data.article_pType" clearable style="width:200px" placeholder="请选择文章类别" @on-change="ChangeArticleType">
                        <Option value="0" key="0" selected>全部文章</Option>
                        <Option value="news" key="news">新闻资讯</Option>
                        <Option value="notice" key="notice">通知公告</Option>
                        <Option value="laws" key="laws">政策法规</Option>
                    </Select>
                </div>
            </Col>
            <Col span="5">
                <div>
                    <Select v-model="query_data.article_aType" clearable style="width:200px" placeholder="请选择详细分类" >
                        <Option value="0" key="0" selected>全部分类</Option>
                        <Option v-for="item in aTypes" :value="item.name" :key="item.name">{{item.name}}</Option>
                    </Select>
                </div>
            </Col>
            <Col span="5" style="margin-left:20px">
                <div>
                    <Select v-model="query_data.timeSelect" clearable style="width:200px" placeholder="请选择时间段">
                        <Option value="0" :key="0">全部时间</Option>
                        <Option value="3" :key="3">三天内</Option>
                        <Option value="7" :key="7">一周内</Option>
                        <Option value="30" :key="30">一个月内</Option>
                        <Option value="90" :key="90">三个月内</Option>
                    </Select>
                </div>
            </Col>
        </Row>
        <Row>
            <Col span="24">
                <Card v-for="item in articleList" class="content">
                    <p solt="title">
                        <Row>
                        <Col span="20">
                            <router-link :to="{name:'main_article_detail',params:{p_type: item.p_type,id: item.id} }"><h3 style="color:black">[{{get_pType(item.p_type)}}]&nbsp;&nbsp;{{item.title}}</h3></router-link>
                        </Col>
                        <Col span="4">
                            <p style="margin-right:20px">时间：{{dateformat(item.create_time)}}</p>
                        </Col>
                        </Row>
                    </p>
                </Card>
            </Col>
        </Row>
        <div>
            <AutoPage v-model="page"></AutoPage>
        </div>
  </div>
</template>
<script>
    import Vue from 'vue';
    import Page from "@/common/model/Page";
    import AutoPage from "@/common/components/AutoPage";
export default {
    name: 'page',
    data(){
        var query_data = {
            article_pType: '0',
            article_aType: '0',
            search_article: '',
            timeSelect: 0
        };
        return{
            page: new Page("search/article", this.formatQueryData(query_data)),
            query_data: query_data,
            article_aTypeList:[]
        }
    },
    methods:{
        ChangeArticleType(){
            if(this.query_data.article_pType=="news"){
                this.article_aTypeList=this.dicTree.news.children;
                this.query_data.article_aType="0";
            }else if(this.query_data.article_pType=="notice"){
                this.article_aTypeList=this.dicTree.notice.children;
                this.query_data.article_aType="0";
            }else if(this.query_data.article_pType=="laws"){
                this.article_aTypeList=this.dicTree.laws.children;
                this.query_data.article_aType="0";
            }else{
                this.article_aTypeList=[];
                this.query_data.article_aType="0";
            }
        },
        dateformat(a){
            return new Date(parseInt(a)).toLocaleDateString()+" "+new Date(parseInt(a)).getHours()+":"+new Date(parseInt(a)).getMinutes();
        },
        formatQueryData(data) {
            var begin_time = "0000000000000";
            var end_time = Date.now();
            if(data.timeSelect != 0) begin_time = end_time - data.timeSelect*24*60*60*1000;
            return {
                search: data.search_article,
                p_type: data.article_pType,
                a_type: data.article_aType,
                begin_time: begin_time,
                end_time: end_time
            }
        },
        get_pType(p){
            if(p=="news"){
                return "新闻资讯";
            }else if(p=="notice"){
                return "通知公告";
            }else if(p=="laws"){
                return "政策法规";
            }
            return "";
        },
        handleSearch() {
            this.page.action_data = this.formatQueryData(this.query_data);
            this.page.getData();
        },
    },
    computed:{
        dicTree(){
            return this.$store.state.app.dicTree;
        },
        aTypes() {
            return this.query_data.article_pType == "0" ? [] : this.$store.state.app.dicTree[this.query_data.article_pType].children;
        },
        articleList() {
            return this.page.list;
        }
    },
    components:{
        AutoPage
    },
    created(){
        if(this.$route.query.ptype!=null){
            this.query_data.article_pType=this.$route.query.ptype;
            this.ChangeArticleType();
            this.query_data.article_aType=this.$route.query.atype;
            this.query_data.timeSelect=this.$route.query.time;
            console.log("timeselect========="+this.query_data.timeSelect);
            this.query_data.search_article=unescape(this.$route.query.searchitem);
            console.log("ptype:====="+this.query_data.article_pType);
            this.handleSearch();
        }
        
        
    }
    
}
</script>
<style scoped>
    .content{
        margin-top: 5px;
        padding-bottom: 5px;
    }

</style>
